<template>
  <div>
    <div style="line-height: 50px;
                font-weight: 700;
                color: #2a2727;
                padding-left: 25px">
      找到{{videoCount}}张专辑
    </div>
    <div class="video">
      <div v-for="(item, index) in videos"
           :key="index"
           class="itemInfo"
      >
        <img v-lazy="item.coverUrl" alt="" @click="goMvDetail(item)">
        <div class="playCount">
          <img style="width: 20px;height:20px;position: relative;top: -4px;" src="~@/assets/img/home/play-m.svg" alt="" >
          <div>{{ (item.playTime/10000).toFixed()}}</div>
          <span>万</span>
        </div>
        <div class="duration">{{item.durationms | duration}}</div>
        <p>{{item.title}}</p>
      </div>
    </div>
    <!--      分页按钮-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="videoCount"
      :page-size="28"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import {home} from "@/network/home";
  import {format} from "@/components/common/utilis";

  export default {
    name: "SearchVideo",
    data(){
      return{
        key:this.$route.params.data,  //当前搜索词
        videos:[],  //视频封面数据
        videoCount: 0, //视频数量
        currentPage: 0, //当前页
      }
    },
    filters:{
      // 格式化歌曲时间
      duration(value){
        return format(value/1000)
      },
    },
    created() {
      //获取搜索数据
      this.getSearch(this.key)
    },
    methods:{
      //跳转到视频详情页面
      goMvDetail(item){
        //搜索的视频有mv和video两种情况
        item.type === 0 ? this.$router.push('/mvdetail/id=' + item.vid) : this.$router.push('/videodetail/id=' + item.vid)
      },
      //点击分页切换页数的函数
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSearch(this.key,this.currentPage * 28)
      },

      //获取搜索数据的函数
      getSearch(key ,offset){
        home.getSearch(key, 1014, offset).then(res => {
          this.videos = res.data.result.videos
          this.videoCount = res.data.result.videoCount
          console.log(res);
        })
      },
    },
  }
</script>

<style scoped>
.video{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /*这是歌单详情路由的父组件，此代码防止两个组件的滚动条冲突，*/
  overflow-y: hidden;
  padding-top: 20px;
}
.itemInfo{
  width: 21%;
  margin-bottom: 20px;
  position: relative;
}
.itemInfo img:nth-child(1){
  width: 100%;
  height: 135px;
  border-radius: 7px;
  cursor: pointer;
}
.itemInfo p{
  font-size: 14px;
  color: rgb(92, 81, 81);
  line-height: 20px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.playCount{
  position: absolute;
  top: 5px;
  right: 5%;
  display: flex;
  font-size: 12px;
  color: white;
}
.duration{
  position: absolute;
  right: 5%;
  top: 115px;
  font-size: 14px;
  color: #F4F4F4;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
